<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.w3.org/1999/xhtml">

<head>
    <th:block th:include="common/common_head :: commonHeader('资源管理')"/>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-condition">
            <form id="menu-form">
                <div class="select-list">
                    <ul>
                        <li>
                            资源名称：<input type="text" name="name"/>
                        </li>
                        <li>
                            <button type="button" class="btn btn-primary btn-rounded btn-sm" onclick="queryTable()"><i class="fa fa-search"></i>&nbsp;搜索</button>
                            <button class="btn btn-warning btn-rounded btn-sm" type="reset"><i class="fa fa-eraser"></i>&nbsp;重置</button>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="col-sm-12 select-info order-table">
            <div class="btn-group hidden-xs toolbar" id="toolbar" role="group">
                <a class="btn btn-outline btn-success btn-rounded" onclick="toAddMenu()" shiro:hasPermission="sys:menu:insert">
                    <i class="fa fa-plus"></i> 新增
                </a>
                <a class="btn btn-outline btn-danger btn-rounded" onclick="reloadTable()">
                    <i class="fa fa-refresh"></i> 刷新
                </a>
            </div>
            <table id="menuTreeTable" data-mobile-responsive="true"></table>
        </div>
    </div>
</div>
<!--引入公共js-->
<div th:include="common/onload_js :: onloadJS"></div>
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('sys:menu:update')}]];
    var delFlag = [[${@permission.hasPermi('sys:menu:delete')}]];
    var tree_table_option={
    	        url: ctxPath+"/sys/menu/list",
    	        uniqueId: "menuId", //每一行的唯一标识，一般为主键列
    	        treeId: "menuId",//定义关键字段来标识树节点
    	        treeField: "name",//定义树节点字段
    	        treeParentId: "parentId", //定义父级ID字段
    	        treeRootLevel: 0,//根节点序号
        "columns": [
            {
                field: 'menuId',
                visible: false
            },{
                field:'name',
                title:'名称',
                formatter: function (value, row, index) {
                    if (row.icon == null || row == "") {
                        return row.name;
                    } else {
                        return '<i class="' + row.icon + '"></i> <span class="nav-label">' + row.name + '</span>';
                    }
                }
            },{
                field:'type',
                title:'资源类型',
                formatter: function (value) {
                    return formatter(value,{"0":'<span class="label label-success">目录</span>',
                        "1":'<span class="label label-primary">菜单</span>',
                        "2":'<span class="label label-warning">按钮</span>'});
                }
            },{
                field:'url',
                title:'资源路径'
            },{
                field:'perms',
                title:'权限标识符'
            },{
                field:'orderNum',
                title:'排序码'
            },{
                title: '操作',
                formatter: function (value, row, index) {
                    var step = "    ";
                    var edit = "<button type='button' class='btn btn-success btn-xs "+ editFlag +"' onclick='toEditMenu( " + row.menuId +
                        ")'><i class='fa fa-edit'>编辑</i> </button>";
                    var del = "<button type='button' class='btn btn-danger btn-xs "+ delFlag +"' onclick='deleteMenu( " + row.menuId +
                        ")'><i class='fa fa-remove'>删除</i> </button>";
                    return edit + step + del;
                }
            }
        ]
    };
    TREE_GRID.init("menuTreeTable", tree_table_option);

    function reloadTable() {
        TREE_GRID.refresh('menu-form');
    }
    
    function queryTable() {
        TREE_GRID.search('menu-form');
    }

    function formatter(value,option) {
        var formatter = "";
        if (value != undefined) {
            if ( option != undefined) {
                if (option[value] != undefined) {
                    formatter = option[value]
                }
            } else{
                formatter = value
            }
        }
        return formatter;
    }

    // 新增
    function toAddMenu(){
        Dialog.openUrl('添加新资源', ctxPath+'/modules/sys/menu/menu_add.html', {
            area : ['820px' , '600px']
        });
    }

    /**
     * 编辑
     */
    function toEditMenu(id) {
        Dialog.openUrl('修改资源', ctxPath+'/sys/menu/toEdit/'+id, {
            area : ['820px' , '600px']
        });
    }

    function deleteMenu(id) {
        Dialog.confirm("确认要删除？", function () {
            Page.ajaxPOST(ctxPath + "/sys/menu/delete/"+id, null, function (data) {
                //刷新列表
                Dialog.msg("操作成功", function () {
                    reloadTable();
                });
            });
        });

    }
</script>

</body>
</html>
